<template>
  <ul class="list">
    <li class="item" v-for="item in lists" :key="item.id">
      <router-link :to="{ path: `/video/${item.id}` }">
        <img :src="item.picUrl || item.cover" alt="" />
      </router-link>
      <p>
          {{item.artistName}} <br>
        {{ item.name }}
      </p>
      <Ico></Ico>
    </li>
  </ul>
</template>

<script>
import Ico from "../Ico";
export default {
  name: "MvItem",
  props: ["lists"],
  components: {
    Ico,
  },
};
</script>

<style lang="scss" scoped>
.list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 2rem;
  .item {
    position: relative;
    img {
      width: 24rem;
      height: 12rem;
      border-radius: 0.4rem;
    }
    p {
      height: 4.2rem;
      width: 25rem;
      overflow: hidden;
    }
  }
}
</style>